<template>
	<div>
		<mt-tabbar v-model="selectedC">
		  <mt-tab-item id="infs" >
		    <img slot="icon" :src="imgSrc.infs">
		    消息
		  </mt-tab-item>
		  <mt-tab-item id="links">
		    <img slot="icon" :src="imgSrc.links">
		    联系人
		  </mt-tab-item>
		  <mt-tab-item id="wechat">
		    <img slot="icon" :src="imgSrc.wechat">
		    群聊
		  </mt-tab-item>
		</mt-tabbar>
	</div>
</template>
<script>
	export default {
		name:'labs',
		props:{
			selected:{
				type:String,
				required:true
			}
		},
		created(){
			this.srcs.forEach(item=>{
				if(item == this.selectedC){
					this.imgSrc[item] = "static/imgs/"+item+"1.png"
				} else{
					this.imgSrc[item] = "static/imgs/"+item+"0.png"
				}

			})
		},
		data(){
			return {
				selectedC:this.selected,
				imgSrc:{
					infs:"static/imgs/infs0.png",
					links:"static/imgs/links1.png",
					wechat:"static/imgs/wechat0.png",
				},
				srcs:['infs','links','wechat']
			}
		},
		watch:{
			selectedC:function(val,option){
				//初始化图标logo
				this.srcs.forEach(item=>{
					if(item == val)return
					this.imgSrc[item] = "static/imgs/"+item+"0.png"
				});
				this.imgSrc[val] = "static/imgs/"+val+"1.png";
				this.$router.push({path:val});//切换页面
			}
		},
	}
</script>